<template>
    <div id="special-recommon">
        <template v-for="(item,index) in articleList">
            <div
                :key="item._id"
                class="special-recommon-item"
            >
                <div
                    v-lazy:background-image="item.coverImagesUrl"
                    class="img"
                ></div>
                <div
                    class="ellipsis title"
                    v-text="item.title"
                ></div>
                <div
                    class="line-ellipsis content"
                    v-text="item.synopsis"
                ></div>
                <div
                    class="pointer read"
                    @click="showArticleDetail(index,item)"
                >
                    +阅读文章
                </div>
            </div>
        </template>
    </div>
</template>

<script>
    import { searchArticleMixins } from 'assets/js/mixins';
    export default {
        mixins: [
            searchArticleMixins
        ],
        data () {
            return {
                paramsJson: {
                    type: 'isSpecialRecommend'
                }
            };
        }
    };
</script>

<style lang="less" scoped>
@import '~assets/styles/variable';
#special-recommon{
    display: flex;
    flex-wrap: wrap;
    padding: 20px 10px;
    .special-recommon-item {
        width: 33.33%;
        padding: 20px;
        overflow: hidden;
        &:not(:nth-child(3n + 3)){
            border-right: 1px solid #ccc;
        }
        &:not(:last-child):not(:nth-last-child(2)):not(:nth-last-child(3)){
            border-bottom: 1px solid #ccc;
        }
        &:hover {
            box-shadow: 0 2px 6px rgb(214, 214, 214, .4);
        }
        .img{
            height: 100px;
            border-radius: 10px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }
        .title{
            line-height: 50px;
            font-weight: bold;
        }
        .content{
            height: 72px;
            line-height: 24px;
            color: @color-text-g;
            font-size: @font-size-medium;
            -webkit-line-clamp: 3;
        }
        .read{
            margin-top: 10px;
        }
    }
}
</style>
